<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>day05-享+本地生活 | 武汉设计工程学院yyds</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/xcx_dx/favicon.ico">
    <link rel="apple-touch-icon" href="/xcx_dx/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/xcx_dx/assets/css/0.styles.e1df3f18.css" as="style"><link rel="preload" href="/xcx_dx/assets/js/app.c36966b9.js" as="script"><link rel="preload" href="/xcx_dx/assets/js/2.13776caa.js" as="script"><link rel="preload" href="/xcx_dx/assets/js/13.8aa3d205.js" as="script"><link rel="prefetch" href="/xcx_dx/assets/js/10.03e33fcc.js"><link rel="prefetch" href="/xcx_dx/assets/js/11.cead7584.js"><link rel="prefetch" href="/xcx_dx/assets/js/12.bcd5da7d.js"><link rel="prefetch" href="/xcx_dx/assets/js/14.6565609c.js"><link rel="prefetch" href="/xcx_dx/assets/js/15.1e819a14.js"><link rel="prefetch" href="/xcx_dx/assets/js/16.d240c4eb.js"><link rel="prefetch" href="/xcx_dx/assets/js/17.1054f905.js"><link rel="prefetch" href="/xcx_dx/assets/js/18.7e22f3ac.js"><link rel="prefetch" href="/xcx_dx/assets/js/3.9977063c.js"><link rel="prefetch" href="/xcx_dx/assets/js/4.1f2503c5.js"><link rel="prefetch" href="/xcx_dx/assets/js/5.9aeec249.js"><link rel="prefetch" href="/xcx_dx/assets/js/6.8d7d3795.js"><link rel="prefetch" href="/xcx_dx/assets/js/7.17973866.js"><link rel="prefetch" href="/xcx_dx/assets/js/8.d6f94428.js"><link rel="prefetch" href="/xcx_dx/assets/js/9.ce80b26f.js">
    <link rel="stylesheet" href="/xcx_dx/assets/css/0.styles.e1df3f18.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/xcx_dx/" class="home-link router-link-active"><img src="/xcx_dx/doraameng.jpg" alt="武汉设计工程学院yyds" class="logo"> <span class="site-name can-hide">武汉设计工程学院yyds</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/xcx_dx/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/xcx_dx/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/01" class="sidebar-heading clickable"><span>1-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/02" class="sidebar-heading clickable"><span>2-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/03" class="sidebar-heading clickable"><span>3-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/04" class="sidebar-heading clickable"><span>4-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/05" class="sidebar-heading clickable open active"><span>5-享+本地生活</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/xcx_dx/xcx/05.html" aria-current="page" class="active sidebar-link">day05-享+本地生活</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_01-将token添加到请求头" class="sidebar-link">01.将token添加到请求头</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#参考代码" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_02-refreshtoken介绍" class="sidebar-link">02.refreshToken介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-2" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#安全还是体验" class="sidebar-link">安全还是体验</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#refreshtoken工作机制" class="sidebar-link">refreshToken工作机制</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_03-存储refreshtoken" class="sidebar-link">03.存储refreshToken</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-3" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#核心步骤" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#参考代码-2" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_04-发送刷新token请求" class="sidebar-link">04.发送刷新token请求</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-4" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#思考" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#产生401" class="sidebar-link">产生401</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#刷新token核心步骤" class="sidebar-link">刷新token核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#最终参考代码" class="sidebar-link">最终参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_05-优化没有token时页面依旧发送请求bug" class="sidebar-link">05.优化没有token时页面依旧发送请求bug</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-5" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#现存问题" class="sidebar-link">现存问题</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#解决方案" class="sidebar-link">解决方案</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#小结" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_06-重新发送401请求" class="sidebar-link">06.重新发送401请求</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-6" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#思考-2" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#重新发送请求" class="sidebar-link">重新发送请求</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_07-个人资料-设置用户昵称" class="sidebar-link">07.个人资料—设置用户昵称</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-7" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#前置准备" class="sidebar-link">前置准备</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#核心步骤-2" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#参考代码-3" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_08-小程序上传文件-wx-uploadfile" class="sidebar-link">08.小程序上传文件—wx.uploadFile</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-8" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#小程序文件上传" class="sidebar-link">小程序文件上传</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_09-个人资料-设置用户头像" class="sidebar-link">09.个人资料—设置用户头像</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-9" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#核心步骤-3" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#参考代码-4" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_10-获取个人信息" class="sidebar-link">10.获取个人信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-10" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#参考代码-5" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_11-房屋管理-介绍" class="sidebar-link">11.房屋管理—介绍</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_12-地理定位-getlocation-chooselocation" class="sidebar-link">12.地理定位—getLocation&amp;chooseLocation</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-11" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#getlocation" class="sidebar-link">getLocation</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#chooselocation" class="sidebar-link">chooseLocation</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_13-腾讯位置服务" class="sidebar-link">13.腾讯位置服务</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-12" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#位置服务sdk" class="sidebar-link">位置服务SDK</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#使用步骤" class="sidebar-link">使用步骤</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_14-腾讯位置服务-逆地址解析" class="sidebar-link">14.腾讯位置服务—逆地址解析</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-13" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#思考-3" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#逆地址解析-reversegeocoder" class="sidebar-link">逆地址解析-reverseGeocoder</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#参考代码-6" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_15-腾讯位置服务-地点搜索" class="sidebar-link">15.腾讯位置服务—地点搜索</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-14" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#思考-4" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#地点搜索-search" class="sidebar-link">地点搜索—search</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#参考代码-7" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_16-房屋管理-选择楼栋" class="sidebar-link">16.房屋管理—选择楼栋</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-15" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#核心步骤-4" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#参考代码-8" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#_17-房屋管理-选择房间" class="sidebar-link">17.房屋管理—选择房间</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#目标-16" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#核心步骤-5" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/05.html#参考代码-9" class="sidebar-link">参考代码</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/06" class="sidebar-heading clickable"><span>6-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/07" class="sidebar-heading clickable"><span>7-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/08" class="sidebar-heading clickable"><span>8-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/09" class="sidebar-heading clickable"><span>9-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/10" class="sidebar-heading clickable"><span>10-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="day05-享-本地生活"><a href="#day05-享-本地生活" class="header-anchor">#</a> day05-享+本地生活</h1> <h2 id="_01-将token添加到请求头"><a href="#_01-将token添加到请求头" class="header-anchor">#</a> 01.将token添加到请求头</h2> <h3 id="目标"><a href="#目标" class="header-anchor">#</a> 目标</h3> <p>掌握请求拦截器的使用。</p> <h3 id="参考代码"><a href="#参考代码" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">)</span>复习

<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span>
obj <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'zs'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">24</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> obj<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 导入请求模块</span>
<span class="token keyword">import</span> http <span class="token keyword">from</span> <span class="token string">'wx-https'</span>

<span class="token comment">// 配置基地址</span>
http<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">'https://live-api.itheima.net'</span>

<span class="token comment">// 响应拦截器配置</span>
http<span class="token punctuation">.</span>intercept<span class="token punctuation">.</span><span class="token function-variable function">response</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// console.log(res)</span>
  <span class="token keyword">return</span> res<span class="token punctuation">.</span>data
<span class="token punctuation">}</span>

<span class="token comment">// 请求拦截器配置</span>
http<span class="token punctuation">.</span>intercept<span class="token punctuation">.</span><span class="token function-variable function">request</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 指定一个公共的头信息</span>
  <span class="token keyword">const</span> defaultHeader <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

  <span class="token comment">// 读取 token</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> token <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">// 追加 token 头信息</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>token<span class="token punctuation">)</span> defaultHeader<span class="token punctuation">.</span>Authorization <span class="token operator">=</span> token

  <span class="token comment">// 合并自定义头信息和公共头信息</span>
  <span class="token comment">// params.header = Object.assign(defaultHeader, params.header)</span>
  <span class="token comment">// 下面这种方式也可以，返回一个新地址</span>
  params<span class="token punctuation">.</span>header <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> defaultHeader<span class="token punctuation">,</span> params<span class="token punctuation">.</span>header<span class="token punctuation">)</span>

  <span class="token comment">// 处理后的请求参数</span>
  <span class="token keyword">return</span> params
<span class="token punctuation">}</span>
<span class="token comment">// 挂载到全局空间wx上</span>
<span class="token comment">// 前面最好加号$，用以和原生的api做区分</span>
wx<span class="token punctuation">.</span>$http <span class="token operator">=</span> http

<span class="token comment">// 导出模块</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> http

</code></pre></div><h2 id="_02-refreshtoken介绍"><a href="#_02-refreshtoken介绍" class="header-anchor">#</a> 02.refreshToken介绍</h2> <h3 id="目标-2"><a href="#目标-2" class="header-anchor">#</a> 目标</h3> <p>掌握refreshToken原理</p> <h3 id="安全还是体验"><a href="#安全还是体验" class="header-anchor">#</a> 安全还是体验</h3> <ul><li>从安全角度来看 token 必须要具有一定的时效性，享+社区约定了 token 的时效为8个小时，失效后的 token 不再能标识用是登录状态。</li> <li>另外也要考虑用户的体验，例如用户在 token 失效的前 1 分钟打开小程序，用户浏览小程序 1 分钟后 token 失效，用户不得不再次去登录，这样的用户体验是极差的。</li> <li>为了既能保证安全性又兼顾用户体验，咱们需要能够自动刷新 token 的方法，即 refreshToken。</li></ul> <h3 id="refreshtoken工作机制"><a href="#refreshtoken工作机制" class="header-anchor">#</a> refreshToken工作机制</h3> <ol><li>用户在首次完成登录时会分别得到 token 和 refreshToken</li> <li>当 token 失效后，调用接口会返回 401 状态码（这是与后端约定好的规则）</li> <li>检测状态码是否为 401，如果是则调用刷新token的接口并<strong>传递 refreshToken</strong></li> <li>刷新 token 的接口后会返回新的 token 和 refreshToken</li> <li>把401的请求重新发送一遍
:::success
注意：<br>refreshToken也是有过期时间的，只不过一般会比token过期时间更长一些。这就是为啥如果某个应用我们天天打开，则不会提示我们登录，如果是有几周或更长时间去打开时，会再次要求我们登录。<br>refreshToken一个更常见的名字叫token无感刷新。
:::</li></ol> <h2 id="_03-存储refreshtoken"><a href="#_03-存储refreshtoken" class="header-anchor">#</a> 03.存储refreshToken</h2> <h3 id="目标-3"><a href="#目标-3" class="header-anchor">#</a> 目标</h3> <p>掌握本地存储及getApp()的应用。</p> <h3 id="核心步骤"><a href="#核心步骤" class="header-anchor">#</a> 核心步骤</h3> <ul><li>登录后，将token和refreshToken同时保存到本地存储及全局app实例中</li> <li>在onLaunch钩子里从本地存储获取refreshToken赋值给app实例</li></ul> <h3 id="参考代码-2"><a href="#参考代码-2" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 改造app.js  封装一个getToken方法</span>
<span class="token function">getToken</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 异步方式不会阻塞</span>
  wx<span class="token punctuation">.</span><span class="token function">getStorage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    key<span class="token punctuation">,</span>
    <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> data <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// this 指向应用实例</span>
      <span class="token keyword">this</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> data
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">fail</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">''</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 修改login登录页 js</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token keyword">async</span> <span class="token function">submitForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// .... 省略</span>

    <span class="token comment">// 存储token及refreshToken</span>
    <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token
    <span class="token keyword">const</span> refreshToken <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>refreshToken
    wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">,</span> token<span class="token punctuation">)</span>
    wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'refreshToken'</span><span class="token punctuation">,</span> refreshToken<span class="token punctuation">)</span>
    <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    app<span class="token punctuation">.</span>token <span class="token operator">=</span> token
    app<span class="token punctuation">.</span>refreshToken <span class="token operator">=</span> refreshToken

    <span class="token comment">// 重定向回访问页, 如没有则回首页</span>
    wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>redirectUrl <span class="token operator">||</span> <span class="token string">'/pages/index/index'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// app.js</span>
<span class="token comment">// 导入模块，执行里面代码</span>
<span class="token keyword">import</span> <span class="token string">'./utils/utils'</span>
<span class="token keyword">import</span> <span class="token string">'./utils/request'</span>
<span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">globalData</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 小程序启动时，从本地存储中获取token及refreshToken赋值给app实例</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getToken</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getToken</span><span class="token punctuation">(</span><span class="token string">'refreshToken'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 异步api实现</span>
    wx<span class="token punctuation">.</span><span class="token function">getStorage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">key</span><span class="token operator">:</span> key<span class="token punctuation">,</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> data <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> data
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 同步api实现</span>
    <span class="token comment">// this.token = wx.getStorageSync('token');</span>
    <span class="token comment">// this[key] = wx.getStorageSync(key)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_04-发送刷新token请求"><a href="#_04-发送刷新token请求" class="header-anchor">#</a> 04.发送刷新token请求</h2> <h3 id="目标-4"><a href="#目标-4" class="header-anchor">#</a> 目标</h3> <p>能独立完成刷新token功能</p> <h3 id="思考"><a href="#思考" class="header-anchor">#</a> 思考</h3> <p>怎么让请求401呢？401后去哪里发刷新token的请求呢？</p> <h3 id="产生401"><a href="#产生401" class="header-anchor">#</a> 产生401</h3> <p>发送一个需要校验token的请求（如获取房屋列表/room)，手动将token改一下，让其失效。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/room'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="刷新token核心步骤"><a href="#刷新token核心步骤" class="header-anchor">#</a> 刷新token核心步骤</h3> <ol><li>添加响应拦截器判断token是否过期，即statusCode是否是401</li> <li>若过期（即statusCode=401）则发送刷新token请求
重要提示！！！刷新token请求这个接口也可能导致401，若是刷新token接口请求导致的则表明refreshToken也过期了，此时应该跳转到登录页。若不是刷新token接口请求导致的则调用刷新token接口以更新token。</li> <li>更新token及refreshToken</li></ol> <h4 id="_4-1-token失效后"><a href="#_4-1-token失效后" class="header-anchor">#</a> 4.1 token失效后</h4> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 首先参数解构一下</span>
http<span class="token punctuation">.</span>intercept<span class="token punctuation">.</span><span class="token function-variable function">response</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
statusCode<span class="token punctuation">,</span>
data<span class="token punctuation">,</span>
<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment">// 如果statusCode时候401 表示token失效， 通过查看接口文档，使用http发送请求</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>statusCode <span class="token operator">===</span> <span class="token number">401</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">// 下面这个请求的意思是 token过期了，使用refreshToken去请求一个新的token</span>
  <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">http</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/refreshToken'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">Authorization</span><span class="token operator">:</span> app<span class="token punctuation">.</span>refreshToken
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'401刷新token请求成功'</span><span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> data
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_4-2-保存token和refreshtoken到app和storage里面"><a href="#_4-2-保存token和refreshtoken到app和storage里面" class="header-anchor">#</a> 4.2 保存token和refreshToken到app和storage里面</h4> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 以下代码在 多个地方都会使用，所以应该在app.js里面封装为一个方法，在其他地方直接调用方法即可</span>
<span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token
<span class="token keyword">const</span> refreshToken <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>refreshToken
app<span class="token punctuation">.</span>token <span class="token operator">=</span> token
app<span class="token punctuation">.</span>refreshToken <span class="token operator">=</span> refreshToken
wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">,</span> token<span class="token punctuation">)</span>
wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'refreshToken'</span><span class="token punctuation">,</span> refreshToken<span class="token punctuation">)</span>

<span class="token comment">// 封装 app.js</span>
<span class="token function">setToken</span><span class="token punctuation">(</span><span class="token parameter">token<span class="token punctuation">,</span> refreshToken</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  token <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> token
  refreshToken <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> refreshToken
  wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">,</span> token<span class="token punctuation">)</span>
  wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'refreshToken'</span><span class="token punctuation">,</span> refreshToken<span class="token punctuation">)</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>token <span class="token operator">=</span> token
  <span class="token keyword">this</span><span class="token punctuation">.</span>refreshToken <span class="token operator">=</span> refreshToken
<span class="token punctuation">}</span>

<span class="token comment">// 拦截器里面 和登录成功页面里面 调用</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token operator">?.</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span><span class="token function">setToken</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token<span class="token punctuation">,</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>refreshToken<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_4-3-401的情况可能是token或者refreshtoken失效"><a href="#_4-3-401的情况可能是token或者refreshtoken失效" class="header-anchor">#</a> 4.3 401的情况可能是token或者refreshToken失效</h4> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 如果statusCode时候401 表示token 或者 refreshToken失效</span>
<span class="token comment">// config 是调用接口的参数</span>
<span class="token comment">// refreshToken 过期的情形</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>config<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/refreshToken'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 读取当前历史栈</span>
  <span class="token keyword">const</span> pageStack <span class="token operator">=</span> <span class="token function">getCurrentPages</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">// 取出当前页面路径，登录成功能跳转到该页面</span>
  <span class="token keyword">const</span> currentPage <span class="token operator">=</span> pageStack<span class="token punctuation">[</span>pageStack<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
  <span class="token comment">// 取出当前页面路径，登录成功能跳转到该页面</span>
  <span class="token keyword">const</span> redirectURL <span class="token operator">=</span> currentPage<span class="token punctuation">.</span>route

  <span class="token comment">// 引导用户到登录页面</span>
  <span class="token keyword">return</span> wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/pages/login/index?redirectURL=/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>redirectURL<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="最终参考代码"><a href="#最终参考代码" class="header-anchor">#</a> 最终参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 导入请求模块</span>
<span class="token keyword">import</span> http <span class="token keyword">from</span> <span class="token string">'wx-https'</span>

<span class="token comment">// 配置基地址</span>
http<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">'https://live-api.itheima.net'</span>

<span class="token comment">// 响应拦截器配置</span>
http<span class="token punctuation">.</span>intercept<span class="token punctuation">.</span><span class="token function-variable function">response</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> statusCode<span class="token punctuation">,</span> config<span class="token punctuation">,</span> data <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// console.log(res)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>statusCode <span class="token operator">===</span> <span class="token number">401</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 如果是刷新请求接口产生的401，说明refreshToken也过期了，这时应该跳登录页让用户重新登录</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>config<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'refreshToken'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> pages <span class="token operator">=</span> <span class="token function">getCurrentPages</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">const</span> lastPage <span class="token operator">=</span> pages<span class="token punctuation">[</span>pages<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
      <span class="token keyword">const</span> route <span class="token operator">=</span> lastPage<span class="token punctuation">.</span>route
      wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/pages/login/index?redirectUrl=/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">return</span> wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/pages/login/index?redirectUrl=/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 发送刷新token请求，更新token</span>
    <span class="token comment">// 注意这里只能用http方式，不能用http.post，因为需要传递自定义header</span>
    <span class="token comment">// 若使用http.post，则header里的Authorization的值是token而不是refreshToken</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">http</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/refreshToken'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>refreshToken<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 更新token及refreshToken</span>
    <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setToken</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token<span class="token punctuation">,</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>refreshToken<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> data
<span class="token punctuation">}</span>

<span class="token comment">// 请求拦截器配置</span>
http<span class="token punctuation">.</span>intercept<span class="token punctuation">.</span><span class="token function-variable function">request</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> defaultHeader <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token<span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 合并用户传递的header及默认header</span>
  config<span class="token punctuation">.</span>header <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> defaultHeader<span class="token punctuation">,</span> config<span class="token punctuation">.</span>header<span class="token punctuation">)</span>
  <span class="token comment">// console.log(config)</span>
  <span class="token keyword">return</span> config
<span class="token punctuation">}</span>
<span class="token comment">// 挂载到全局空间wx上</span>
<span class="token comment">// 前面最好加号$，用以和原生的api做区分</span>
wx<span class="token punctuation">.</span>$http <span class="token operator">=</span> http

<span class="token comment">// 导出模块</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> http

</code></pre></div><h2 id="_05-优化没有token时页面依旧发送请求bug"><a href="#_05-优化没有token时页面依旧发送请求bug" class="header-anchor">#</a> 05.优化没有token时页面依旧发送请求bug</h2> <h3 id="目标-5"><a href="#目标-5" class="header-anchor">#</a> 目标</h3> <p>掌握组件及页面生命周期及getCurrentPages的应用。</p> <h3 id="现存问题"><a href="#现存问题" class="header-anchor">#</a> 现存问题</h3> <p>在用户未登录状态下（没有token），若用户访问的页面存在需要验证token的请求，则该请求还是会被发送出错，并在控制台显示500报错。<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676452154152-70e68587-331c-45ae-ac68-99b9a9507310.png#averageHue=%232b2d2c&amp;clientId=u6167c2fb-23c1-4&amp;from=paste&amp;height=177&amp;id=ufe3a4f1e&amp;name=image.png&amp;originHeight=354&amp;originWidth=944&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=94635&amp;status=done&amp;style=none&amp;taskId=u4a2b0d85-3b45-4a8b-aafd-4cda2d9b47b&amp;title=&amp;width=472" alt="image.png"></p> <h3 id="解决方案"><a href="#解决方案" class="header-anchor">#</a> 解决方案</h3> <p>组件的attached钩子会优先与页面的onLoad钩子执行，我们可以在Authorization组件的attached钩子中检测到用户没有token时，将页面的onLoad钩子重写。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">/**
   * 组件的属性列表
   */</span>
  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/**
   * 组件的初始数据
   */</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">isLogin</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">lifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在组件实例进入页面节点树时执行</span>
    <span class="token comment">// 这里不能用created钩子，因为created里面不能调用setData</span>
    <span class="token function">attached</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> isLogin <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        isLogin<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isLogin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> pages <span class="token operator">=</span> <span class="token function">getCurrentPages</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token comment">// console.log(pages)</span>
        <span class="token keyword">const</span> lastPage <span class="token operator">=</span> pages<span class="token punctuation">[</span>pages<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
        <span class="token comment">// 或 const lastPage = pages.pop()</span>
        <span class="token comment">// 重置页面的钩子</span>
        lastPage<span class="token punctuation">.</span><span class="token function-variable function">onLoad</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
        lastPage<span class="token punctuation">.</span><span class="token function-variable function">onShow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
        <span class="token keyword">const</span> route <span class="token operator">=</span> lastPage<span class="token punctuation">.</span>route
        wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/pages/login/index?redirectUrl=/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h3 id="小结"><a href="#小结" class="header-anchor">#</a> 小结</h3> <p>组件页面生命周期执行顺序：<br>组件create-&gt;组件attached()-&gt;页面onLoad()-&gt;组件show()-&gt;页面onShow()-&gt;组件ready()-&gt;页面onReady();  <a href="https://blog.csdn.net/weixin_45172119/article/details/120764149" target="_blank" rel="noopener noreferrer">参考文章<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_06-重新发送401请求"><a href="#_06-重新发送401请求" class="header-anchor">#</a> 06.重新发送401请求</h2> <h3 id="目标-6"><a href="#目标-6" class="header-anchor">#</a> 目标</h3> <p>能独立完成token过期后请求重新发送功能。</p> <h3 id="思考-2"><a href="#思考-2" class="header-anchor">#</a> 思考</h3> <p>用户请求某个接口时 token 失效，咱们去刷新了 token，当token刷新成功后，怎么让用户看到他想看到的请求数据呢？</p> <h3 id="重新发送请求"><a href="#重新发送请求" class="header-anchor">#</a> 重新发送请求</h3> <p>当token刷新成功后，我们应该重新发送用户产生401的请求，以便用户拿到自己想要的数据。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// .... 省略</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">http</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/refreshToken'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>refreshToken<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 更新token及refreshToken</span>
    <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setToken</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token<span class="token punctuation">,</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>refreshToken<span class="token punctuation">)</span>
    
<span class="token comment">//--------------------// 重新发送导致401的请求------------------------</span>
    <span class="token function">http</span><span class="token punctuation">(</span>
      Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>config<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token comment">// config里面包含失败请求的所有配置信息</span>
        <span class="token comment">// 传递新token, 因为config里的header里面的token是过时的</span>
        <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token comment">// 注意这里不能使用res.data.token 因为缺少前缀'Bearer '</span>
          <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token<span class="token punctuation">,</span> 
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
</code></pre></div><h2 id="_07-个人资料-设置用户昵称"><a href="#_07-个人资料-设置用户昵称" class="header-anchor">#</a> 07.个人资料—设置用户昵称</h2> <h3 id="目标-7"><a href="#目标-7" class="header-anchor">#</a> 目标</h3> <p>能独立完成用户昵称的获取与设置功能。</p> <h3 id="前置准备"><a href="#前置准备" class="header-anchor">#</a> 前置准备</h3> <p>个人资料（pages/profile/index）页面必须在用户登录的情况才允许被访问，需要使用前面封装好的 authorization 组件将<strong>整个页面</strong>包起来。</p> <h3 id="核心步骤-2"><a href="#核心步骤-2" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给type=&quot;nickname&quot;的输入框组件绑定blur事件</li> <li>在事件回调中获取用户的昵称</li> <li>发送更新用户昵称的请求</li></ol> <h3 id="参考代码-3"><a href="#参考代码-3" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// wxml</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>field bind<span class="token operator">:</span>blur<span class="token operator">=</span><span class="token string">&quot;getUserNickName&quot;</span> type<span class="token operator">=</span><span class="token string">&quot;nickname&quot;</span> value<span class="token operator">=</span><span class="token string">&quot;{{userInfo.nickName || '微信用户'}}&quot;</span> center label<span class="token operator">=</span><span class="token string">&quot;昵称&quot;</span> input<span class="token operator">-</span>align<span class="token operator">=</span><span class="token string">&quot;right&quot;</span> placeholder<span class="token operator">=</span><span class="token string">&quot;请输入昵称&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>

<span class="token comment">// js</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">userInfo</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
      <span class="token literal-property property">nickName</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">getNickName</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateNickName</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">updateNickName</span><span class="token punctuation">(</span><span class="token parameter">nickName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">'/userInfo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> nickName <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'更新用户信息失败'</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token string-property property">'userInfo.nickName'</span><span class="token operator">:</span> nickName<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>:::success
注意：开发者工具中，输入框的blur事件并不总是能获取到正确的值，多点击两次即可，手机上是正常的，只是开发者工具会有这个问题。
:::</p> <h2 id="_08-小程序上传文件-wx-uploadfile"><a href="#_08-小程序上传文件-wx-uploadfile" class="header-anchor">#</a> 08.小程序上传文件—wx.uploadFile</h2> <h3 id="目标-8"><a href="#目标-8" class="header-anchor">#</a> 目标</h3> <p>掌握小程序上传文件api：wx.uploadFile的使用。</p> <h3 id="小程序文件上传"><a href="#小程序文件上传" class="header-anchor">#</a> 小程序文件上传</h3> <p>微信小程序不提供fromdata对象，以至于提交的表单里面没有办法包含文件，所以无法使用wx.request来上传文件。<br>微信小程序使用wx.uploadFile上传文件。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。<a href="https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html" target="_blank" rel="noopener noreferrer">文档链接<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br>上传文件需要单独配置相关的<strong>合法域名</strong><br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676529328848-a61d2bf2-c408-45ab-a88f-fa1a3cb175fc.png#averageHue=%23fbf1e8&amp;clientId=u3321d368-62a3-4&amp;from=paste&amp;height=265&amp;id=u0c0eea2e&amp;name=image.png&amp;originHeight=530&amp;originWidth=1706&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=114862&amp;status=done&amp;style=none&amp;taskId=u7a7f9c55-f1e8-47de-b209-d038a373e63&amp;title=&amp;width=853" alt="image.png"></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>wx<span class="token punctuation">.</span><span class="token function">chooseImage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> tempFilePaths <span class="token operator">=</span> res<span class="token punctuation">.</span>tempFilePaths
    wx<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'https://example.weixin.qq.com/upload'</span><span class="token punctuation">,</span> <span class="token comment">//仅为示例，非真实的接口地址</span>
      <span class="token literal-property property">filePath</span><span class="token operator">:</span> tempFilePaths<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">formData</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">'user'</span><span class="token operator">:</span> <span class="token string">'test'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">const</span> data <span class="token operator">=</span> res<span class="token punctuation">.</span>data
        <span class="token comment">//do something</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>:::success
注意：小程序下载也不能通过wx.request完成，使用的是wx.downloadFile api。
:::</p> <h2 id="_09-个人资料-设置用户头像"><a href="#_09-个人资料-设置用户头像" class="header-anchor">#</a> 09.个人资料—设置用户头像</h2> <h3 id="目标-9"><a href="#目标-9" class="header-anchor">#</a> 目标</h3> <p>能独立完成获取和设置用户头像功能。</p> <h3 id="核心步骤-3"><a href="#核心步骤-3" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给button open-type=&quot;chooseAvatar&quot;的按钮绑定chooseavatar事件</li> <li>在事件回调中获取用户头像的临时路径（本地路径）</li> <li>调用wx.uploadFile 向图片上传接口发送请求</li></ol> <h3 id="参考代码-4"><a href="#参考代码-4" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// wxml</span>
<span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;button&quot;</span> size<span class="token operator">=</span><span class="token string">&quot;mini&quot;</span> hover<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;none&quot;</span> <span class="token literal-property property">bind</span><span class="token operator">:</span>chooseavatar<span class="token operator">=</span><span class="token string">&quot;getUserAvatar&quot;</span> open<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">&quot;chooseAvatar&quot;</span><span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>image <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;avatar&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;{{userInfo.avatar || '/static/images/avatar_1.jpg'}}&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>image<span class="token operator">&gt;</span>

<span class="token comment">// JS</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">userInfo</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
      <span class="token literal-property property">nickName</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">getAvatar</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateAvatar</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>avatarUrl<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">updateAvatar</span><span class="token punctuation">(</span><span class="token parameter">avatarUrl</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span>baseURL <span class="token operator">+</span> <span class="token string">'/upload'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">filePath</span><span class="token operator">:</span> avatarUrl<span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">//必须自己再传一下header，请求拦截器只是给wx.$http增加了拦截器</span>
        <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">formData</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'avatar'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(res)</span>
        <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'更新头像失败！'</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token string-property property">'userInfo.avatar'</span><span class="token operator">:</span> data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>url<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">getNickName</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateNickName</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">updateNickName</span><span class="token punctuation">(</span><span class="token parameter">nickName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">'/userInfo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> nickName <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'更新用户信息失败'</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token string-property property">'userInfo.nickName'</span><span class="token operator">:</span> nickName<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_10-获取个人信息"><a href="#_10-获取个人信息" class="header-anchor">#</a> 10.获取个人信息</h2> <h3 id="目标-10"><a href="#目标-10" class="header-anchor">#</a> 目标</h3> <p>能独立完成获取个人信息功能。</p> <h3 id="参考代码-5"><a href="#参考代码-5" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//   pages/my/index 页面</span>

<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 在onShow钩子里发请求，这样，每次更新后回到“我的”页面时能实时刷新</span>
  <span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getUserInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> userInfo <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/userInfo'</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>userInfo<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;profile&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;profile-base&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>image <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;avatar&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;{{avatar || '/static/images/avatar_1.jpg'}}&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>image<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nickname&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>nickName <span class="token operator">||</span> <span class="token string">'熊可爱'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>navigator hover<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;none&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;link&quot;</span> url<span class="token operator">=</span><span class="token string">&quot;/pages/profile/index&quot;</span><span class="token operator">&gt;</span>
      去完善信息<span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;enjoy-icon icon-arrow&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>navigator<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;profile-extra&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>navigator <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;item house&quot;</span> url<span class="token operator">=</span><span class="token string">&quot;/house_pkg/pages/list/index&quot;</span> hover<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;none&quot;</span><span class="token operator">&gt;</span>我的房屋<span class="token operator">&lt;</span><span class="token operator">/</span>navigator<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>navigator <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;item repair&quot;</span> url<span class="token operator">=</span><span class="token string">&quot;/repair_pkg/pages/list/index&quot;</span> hover<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;none&quot;</span><span class="token operator">&gt;</span>我的报修<span class="token operator">&lt;</span><span class="token operator">/</span>navigator<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>navigator <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;item visitor&quot;</span> hover<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;none&quot;</span> url<span class="token operator">=</span><span class="token string">&quot;/visitor_pkg/pages/list/index&quot;</span><span class="token operator">&gt;</span>访客记录<span class="token operator">&lt;</span><span class="token operator">/</span>navigator<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
</code></pre></div><h2 id="_11-房屋管理-介绍"><a href="#_11-房屋管理-介绍" class="header-anchor">#</a> 11.房屋管理—介绍</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676534758234-980d8e24-f1f8-4a57-8aaa-23a6ac1fce5a.png#averageHue=%23f4dfaa&amp;clientId=u3321d368-62a3-4&amp;from=paste&amp;height=342&amp;id=u19ad055e&amp;name=image.png&amp;originHeight=684&amp;originWidth=1252&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=162627&amp;status=done&amp;style=none&amp;taskId=u5d7e2210-e123-4391-9e35-d3ef72e2571&amp;title=&amp;width=626" alt="image.png"></p> <h2 id="_12-地理定位-getlocation-chooselocation"><a href="#_12-地理定位-getlocation-chooselocation" class="header-anchor">#</a> 12.地理定位—getLocation&amp;chooseLocation</h2> <h3 id="目标-11"><a href="#目标-11" class="header-anchor">#</a> 目标</h3> <p>掌握小程序中的定位api:getLocation和chooseLocation</p> <h3 id="getlocation"><a href="#getlocation" class="header-anchor">#</a> getLocation</h3> <p>获取用户所在位置的经纬度。在小程序中调用这个接口时必须要在 app.json 中申请调用权限</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;requiredPrivateInfos&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;getLocation&quot;</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;permission&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;scope.userLocation&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;desc&quot;</span><span class="token operator">:</span> <span class="token string">&quot;你的位置信息将用于小程序位置接口的效果展示&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// house_pkg/pages/locate/index</span>

<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676536917404-a17de4b1-ee6c-47bd-b5f4-552ff966b3d1.png#averageHue=%23929391&amp;clientId=u3321d368-62a3-4&amp;from=paste&amp;height=515&amp;id=uab3d3b95&amp;name=image.png&amp;originHeight=1030&amp;originWidth=620&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=136738&amp;status=done&amp;style=none&amp;taskId=ueb6583c4-0563-4729-8c37-190c8860e2e&amp;title=&amp;width=310" alt="image.png"></p> <h3 id="chooselocation"><a href="#chooselocation" class="header-anchor">#</a> chooseLocation</h3> <p>获取用户指定位置的经纬度。在小程序中调用这个接口时必须要在 app.json 中申请调用权限</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;requiredPrivateInfos&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;chooseLocation&quot;</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">chooseLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">chooseLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676537143585-59845ceb-3ff1-4d96-aa2e-aab526fc7758.png#averageHue=%23999b99&amp;clientId=u3321d368-62a3-4&amp;from=paste&amp;height=549&amp;id=u10cf93ca&amp;name=image.png&amp;originHeight=1098&amp;originWidth=626&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=385498&amp;status=done&amp;style=none&amp;taskId=u006291a0-3579-47d1-b906-ef736aa3a40&amp;title=&amp;width=313" alt="image.png"></p> <h2 id="_13-腾讯位置服务"><a href="#_13-腾讯位置服务" class="header-anchor">#</a> 13.腾讯位置服务</h2> <h3 id="目标-12"><a href="#目标-12" class="header-anchor">#</a> 目标</h3> <p>掌握第三方位置服务的使用。</p> <h3 id="位置服务sdk"><a href="#位置服务sdk" class="header-anchor">#</a> 位置服务SDK</h3> <p>腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序 <a href="https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview" target="_blank" rel="noopener noreferrer">JavaScript SDK<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！</p> <h3 id="使用步骤"><a href="#使用步骤" class="header-anchor">#</a> 使用步骤</h3> <p>按文档指示操作即可。<a href="https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview" target="_blank" rel="noopener noreferrer">文档地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <ol><li><p>申请开发者密钥（key）：<a href="https://lbs.qq.com/dev/console/application/mine" target="_blank" rel="noopener noreferrer">申请密钥<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>WINBZ-SY26J-5DLFA-XDIMX-QLAZF-LHF6R</strong></p></li> <li><p>开通webserviceAPI服务：控制台 -&gt;应用管理 -&gt; <a href="https://lbs.qq.com/dev/console/key/manage" target="_blank" rel="noopener noreferrer">我的应用<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> -&gt;添加key-&gt; 勾选WebServiceAPI -&gt; 保存(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)</p></li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676538401743-e1df7cb2-2b66-466a-a765-ebb260d4ff60.png#averageHue=%23fefefd&amp;clientId=u3321d368-62a3-4&amp;from=paste&amp;height=306&amp;id=u398cf5cb&amp;name=image.png&amp;originHeight=1222&amp;originWidth=1142&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=280531&amp;status=done&amp;style=none&amp;taskId=ua4c3308d-f618-46e0-bbbf-307b39b66d2&amp;title=&amp;width=286" alt="image.png"></p> <ol start="3"><li>下载微信小程序JavaScriptSDK，微信小程序<a href="https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.1.zip" target="_blank" rel="noopener noreferrer">JavaScriptSDK v1.1<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <a href="https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip" target="_blank" rel="noopener noreferrer">JavaScriptSDK v1.2<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>安全域名设置，在<a href="https://mp.weixin.qq.com/wxamp/home/guide" target="_blank" rel="noopener noreferrer">小程序管理后台<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> -&gt; 开发 -&gt; 开发管理 -&gt; 开发设置 -&gt; “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com</li></ol> <h2 id="_14-腾讯位置服务-逆地址解析"><a href="#_14-腾讯位置服务-逆地址解析" class="header-anchor">#</a> 14.腾讯位置服务—逆地址解析</h2> <h3 id="目标-13"><a href="#目标-13" class="header-anchor">#</a> 目标</h3> <p>掌握腾讯地图SDK的逆地址解析api的使用。</p> <h3 id="思考-3"><a href="#思考-3" class="header-anchor">#</a> 思考</h3> <p>如何根据经纬度获取到所在地的名称呢？</p> <h3 id="逆地址解析-reversegeocoder"><a href="#逆地址解析-reversegeocoder" class="header-anchor">#</a> 逆地址解析-reverseGeocoder</h3> <p>本接口提供由坐标到坐标所在位置的文字描述的转换，输入坐标返回地理位置信息和附近poi列表<br>文档地址：<a href="https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder" target="_blank" rel="noopener noreferrer">https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="参考代码-6"><a href="#参考代码-6" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>van<span class="token operator">-</span>cell title<span class="token operator">=</span><span class="token string">&quot;{{address}}&quot;</span> border<span class="token operator">=</span><span class="token string">&quot;{{false}}&quot;</span><span class="token operator">&gt;</span>


<span class="token keyword">import</span> qqMap <span class="token keyword">from</span> <span class="token string">'../../../utils/qqmap'</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">getAddressName</span><span class="token punctuation">(</span><span class="token parameter">latitude<span class="token punctuation">,</span> longitude</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    qqMap<span class="token punctuation">.</span><span class="token function">reverseGeocoder</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">location</span><span class="token operator">:</span> <span class="token punctuation">[</span>latitude<span class="token punctuation">,</span> longitude<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(res)</span>
        <span class="token comment">// 结构赋值，获取地址名称</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> address <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span> <span class="token operator">=</span> res
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          address<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">chooseLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">chooseLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>latitude<span class="token punctuation">,</span> longitude<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getAddressName</span><span class="token punctuation">(</span>latitude<span class="token punctuation">,</span> longitude<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_15-腾讯位置服务-地点搜索"><a href="#_15-腾讯位置服务-地点搜索" class="header-anchor">#</a> 15.腾讯位置服务—地点搜索</h2> <h3 id="目标-14"><a href="#目标-14" class="header-anchor">#</a> 目标</h3> <p>掌握腾讯地图SDK地点搜索api的使用</p> <h3 id="思考-4"><a href="#思考-4" class="header-anchor">#</a> 思考</h3> <p>如何获取当前地址附近的小区呢？</p> <h3 id="地点搜索-search"><a href="#地点搜索-search" class="header-anchor">#</a> 地点搜索—search</h3> <p>地点搜索，搜索周边poi(Point of Interest)，比如：“酒店” “餐饮” “娱乐” “学校” 等等<br>文档地址：<a href="https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch" target="_blank" rel="noopener noreferrer">https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="参考代码-7"><a href="#参考代码-7" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>van<span class="token operator">-</span>cell bind<span class="token operator">:</span>tap<span class="token operator">=</span><span class="token string">&quot;goBuilding&quot;</span> <span class="token literal-property property">mark</span><span class="token operator">:</span>point<span class="token operator">=</span><span class="token string">&quot;{{item.title}}&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;{{neighborhood}}&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;id&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;{{item.title}}&quot;</span> link<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">&quot;navigateTo&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          

<span class="token keyword">import</span> qqMap <span class="token keyword">from</span> <span class="token string">'../../../utils/qqmap'</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getNeighborhood</span><span class="token punctuation">(</span><span class="token parameter">latitude<span class="token punctuation">,</span> longitude</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    qqMap<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">keyword</span><span class="token operator">:</span> <span class="token string">'住宅小区'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">location</span><span class="token operator">:</span> <span class="token punctuation">[</span>latitude<span class="token punctuation">,</span> longitude<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token literal-property property">page_size</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(res)</span>
        <span class="token comment">// 处理一下返回数据，减少setData的数据传输量</span>
        <span class="token keyword">const</span> neighborhood <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">id</span><span class="token operator">:</span> item<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> item<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          neighborhood<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getAddressName</span><span class="token punctuation">(</span><span class="token parameter">latitude<span class="token punctuation">,</span> longitude</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    qqMap<span class="token punctuation">.</span><span class="token function">reverseGeocoder</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">location</span><span class="token operator">:</span> <span class="token punctuation">[</span>latitude<span class="token punctuation">,</span> longitude<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(res)</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> address <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span> <span class="token operator">=</span> res
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          address<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">chooseLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">chooseLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> latitude<span class="token punctuation">,</span> longitude <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getAddressName</span><span class="token punctuation">(</span>latitude<span class="token punctuation">,</span> longitude<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getNeighborhood</span><span class="token punctuation">(</span>latitude<span class="token punctuation">,</span> longitude<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_16-房屋管理-选择楼栋"><a href="#_16-房屋管理-选择楼栋" class="header-anchor">#</a> 16.房屋管理—选择楼栋</h2> <h3 id="目标-15"><a href="#目标-15" class="header-anchor">#</a> 目标</h3> <p>能独立完成选择楼栋功能。</p> <h3 id="核心步骤-4"><a href="#核心步骤-4" class="header-anchor">#</a> 核心步骤</h3> <ol><li>在页面上给相应组件绑定点击事件，并添加mark或者data-进行传参。</li> <li>在事件回调中获取参数并传递给跳转页面</li> <li>在“选择楼栋”页onLoad钩子中获取参数</li></ol> <h3 id="参考代码-8"><a href="#参考代码-8" class="header-anchor">#</a> 参考代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>locate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>当前地点<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{address}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chooseLocation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>enjoy-icon icon-locate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>重新定位<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>附近社区<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 可通过mark 或者自定义属性 data-xxx进行传参 --&gt;</span>
    <span class="token comment">&lt;!-- 也可以使用声明式导航 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goBuilding<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">mark:</span>point</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.title}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{neighborhood}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.title}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">link-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigateTo<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> qqMap <span class="token keyword">from</span> <span class="token string">'../../../utils/qqmap'</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">goBuilding</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(ev)</span>
    <span class="token keyword">const</span> point <span class="token operator">=</span> ev<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>point
    wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/house_pkg/pages/building/index?point='</span> <span class="token operator">+</span> point<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token comment">// ....... 省略</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 选择楼栋页面  house_pkg/pages/building/index</span>

<span class="token operator">&lt;</span>van<span class="token operator">-</span>cell wx<span class="token operator">:</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;{{size}}&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;*this&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;{{point}} {{item + 1}}号楼&quot;</span> <span class="token literal-property property">mark</span><span class="token operator">:</span>building<span class="token operator">=</span><span class="token string">&quot;{{item + 1}}{{type}}&quot;</span> <span class="token literal-property property">bind</span><span class="token operator">:</span>tap<span class="token operator">=</span><span class="token string">&quot;goRoom&quot;</span> is<span class="token operator">-</span>link <span class="token operator">/</span><span class="token operator">&gt;</span>

<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> point <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 伪造数进行渲染</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fake</span><span class="token punctuation">(</span>point<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token function">fake</span><span class="token punctuation">(</span><span class="token parameter">point</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 伪造楼栋/号数据（仅用于授课）</span>
    <span class="token keyword">const</span> size <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">3</span>
    <span class="token comment">// 更新数据，重新渲染</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> point<span class="token punctuation">,</span> size <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token function">goRoom</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 跳转到选择房间页面</span>
    wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/house_pkg/pages/room/index?point=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>point<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;building=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>ev<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>building<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_17-房屋管理-选择房间"><a href="#_17-房屋管理-选择房间" class="header-anchor">#</a> 17.房屋管理—选择房间</h2> <h3 id="目标-16"><a href="#目标-16" class="header-anchor">#</a> 目标</h3> <p>能独立完成选择房间功能</p> <h3 id="核心步骤-5"><a href="#核心步骤-5" class="header-anchor">#</a> 核心步骤</h3> <ol><li>在页面上给相应组件绑定点击事件，并添加mark或者data-进行传参。</li> <li>在事件回调中获取参数并传递给跳转页面</li> <li>在“选择房间”页onLoad钩子中获取参数</li></ol> <h3 id="参考代码-9"><a href="#参考代码-9" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// house_pkg/pages/room/index</span>

<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> point<span class="token punctuation">,</span> building <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      point<span class="token punctuation">,</span>
      building<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fakeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">fakeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 伪造房间号数据（仅用于授课）</span>
    <span class="token keyword">const</span> size <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">4</span>
    <span class="token keyword">const</span> rooms <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>

    <span class="token comment">// 随生生成若干个房间号</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> size<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 随机楼层号</span>
      <span class="token keyword">const</span> floor <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">20</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span>
      <span class="token comment">// 随机房间号</span>
      <span class="token keyword">const</span> No <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span>
      <span class="token comment">// 组合楼层和房间号</span>
      <span class="token keyword">const</span> room <span class="token operator">=</span> <span class="token punctuation">[</span>floor<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> No<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
      <span class="token comment">// 不允许重复的房间号</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>rooms<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>room<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">continue</span>
      <span class="token comment">// 记录房间号</span>
      rooms<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>room<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> rooms <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>room<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{rooms}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>*this<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{point}}{{building}} {{item}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">link-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigateTo<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/house_pkg/pages/form/index?point={{point}}&amp;building={{building}}&amp;room={{item}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">is-link</span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/xcx_dx/xcx/04.html" class="prev">
        day04-享+本地生活
      </a></span> <span class="next"><a href="/xcx_dx/xcx/06.html">
        day06-享+本地生活
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/xcx_dx/assets/js/app.c36966b9.js" defer></script><script src="/xcx_dx/assets/js/2.13776caa.js" defer></script><script src="/xcx_dx/assets/js/13.8aa3d205.js" defer></script>
  </body>
</html>
